<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core">

    <body>
        <ui:composition template="./topbartemplate.xhtml">
            <ui:define name="content">
                <h:form id="form" >
                    <p:growl id="growl" showDetail="true" life="5000" />
                    <p:layout id="mainLayout" style="height: 800px ">
                        <p:layoutUnit position="west" resizable="false" size="300" >
                            <p:panelGrid columns="2" style="width: 100%">
                                <f:facet name="header">
                                    <h:outputText value="#{userBean.user.username}" />
                                </f:facet>
                                <h:outputText value="Name:"/>
                                <h:outputText value="#{userBean.user.name}" style="font-weight: bold"/>
                                <h:outputText value="Surname:" />
                                <h:outputText value="#{userBean.user.surname}" style="font-weight: bold" />
                            </p:panelGrid>  
                            <p:separator/>
                            <p:menu model="#{userPageBean.menuModel}" toggleable="true" style="width: 95%"/>
                            
                            <p:separator/>
                            <p:dataList value="#{userPageBean.myInvitations}" var="invitation" emptyMessage="No invitations." type="definition" >
                                <f:facet name="header">My invitations</f:facet>
                                <h:panelGrid columns="2" style="width: 100%; padding: 3px" columnClasses="label, value" >
                                    <p:link id="invitationName" outcome="/user/eventpage" value="#{invitation.event.name}">
                                        <f:param name="id" value="#{invitation.event.id}" />
                                    </p:link>
                                    <p:selectBooleanButton id="invitationResponse" value="#{invitation.accepted}"  onLabel="Yes" offLabel="No" onIcon="ui-icon-check" offIcon="ui-icon-close"  style="width:80px; float: right">
                                        <p:ajax update="invitationResponse :form:calendar" listener="#{userPageBean.changeInvitation}" />
                                    </p:selectBooleanButton>
                                    <p:tooltip for="invitationName" value="Event #{invitation.event.name} organized by #{invitation.user.username} in the place #{invitation.event.place } at #{invitation.event.startTime}"/>
                                </h:panelGrid>
                            </p:dataList>
                             <p:separator/>
                            <p:button value="Create Event" outcome="createevent" styleClass="ui-priority-primary" style="width: 50%"/>
                        </p:layoutUnit>
                        <p:layoutUnit id="layoutcenter" position="center">
                            <p:schedule id="calendar" value="#{userPageBean.model}" aspectRatio="2.2" tooltip="true" widgetVar="myschedule" resizable="false" draggable="false" ignoreTimezone="false">
                                <p:ajax event="eventSelect" listener="#{userPageBean.onEventSelect}" />
                            </p:schedule>
                        </p:layoutUnit>
                    </p:layout>
                </h:form>
            </ui:define>
        </ui:composition>

    </body>
</html>
